<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="nav1">
            <publicNavigation :pub="pub"></publicNavigation>
          </div>
          <div id="box1" :style="{ height:height }">
            <div class="browse">
              <p>
                <span class="span1">浏览商城</span>
                <span class="span2">如何推广商城链接</span>
              </p>
              <div class="box1">
                <input type="radio" name="browse" id="allow" checked>
                <label for="allow">允许游客浏览</label>
                <span style="color:#D2D2D2;" class="iconfont icon-test191"></span>
              </div>
              <div class="box2">
                <input type="radio" name="browse" id="noAallow">
                <label for="notAllow">不允许游客浏览</label>
                <span style="color:#D2D2D2;" class="iconfont icon-test191"></span>
              </div>
            </div>
            <div class="see">
              <p>
                <span class="span1">查看销售价</span>
              </p>
              <div class="box1">
                <input type="radio" name="see" id="allow" checked>
                <label for="allow">允许游客查看</label>
                <span style="color:#D2D2D2;" class="iconfont icon-test191"></span>
              </div>
              <div class="box2">
                <input type="radio" name="see" id="noAallow">
                <label for="notAllow">不允许游客查看</label>
                <span style="color:#D2D2D2;" class="iconfont icon-test191"></span>
              </div>
            </div>
            <div class="display">
              <p>
                <span class="span1">订货商城商品列表单位显示</span>
              </p>
              <div class="box1">
                <input type="radio" name="display" id="allow" checked>
                <label for="allow">不显示商品单位</label>
              </div>
              <div class="box2">
                <input type="radio" name="display" id="noAallow">
                <label for="notAllow">显示商品单位</label>
                <span style="color:#9F9C99;font-size:12px;">(适合行业：食品、餐饮连锁、酒水饮料、生鲜)</span>
              </div>
            </div>
            <div class="share">
              <p>
                <span class="span1">商城分享</span>
              </p>
              <div id="box">
                <div class="item1">
                  <p class="p1">分享LOGO</p>
                  <div class="tu">
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="iconfont icon-test202 el-upload avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="p2">
                      <span class="span-1">尺寸120px*120px</span>
                      <span style="color:#D2D2D2;" class="iconfont icon-test191"></span>
                    </p>
                  </div>
                </div>
                <div class="item2">
                  <p class="p1">分享LOGO</p>
                  <div class="tu">
                    <el-input
                      type="textarea"
                      placeholder="请输入企业简介，不超过30个字"
                      v-model="textarea"
                      maxlength="30"
                      show-word-limit
                      rows="3"
                      style="width:150%;"
                    ></el-input>
                    <p class="p2">
                      <span class="span-1">推荐输入30个字符，用于微信、QQ分享时作为描述显示</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="title">
              <p>
                <span class="span1">商城首页标题</span>
              </p>
              <div class="style">
                <p class="p2">标题</p>
                <el-input clearable placeholder="请输入标题" v-model="input2"></el-input>
              </div>
            </div>
          </div>
          <div class="btn">
            <button>
              <span class="iconfont icon-test129"></span>
              <span>保存</span>
            </button>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import publicNavigation from '@/views/setUp/publicNavigation/publicNavigation'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      pub: '1',
      imageUrl: '',
      text: '',
      textarea: '',
      input2: '',
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        },
        {
          name: '商城设置',
          path: ''
        }
      ]
    }
  },
  created () { },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    publicNavigation
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    #box1 {
      overflow-y: scroll;

      .browse,
      .see,
      .display {
        margin-top: 35px;
        padding: 0 30px;
        p {
          .span1 {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            margin-right: 20px;
          }
          .span2 {
            display: inline-block;
            font-size: 15px;
            color: #20ade5;
            cursor: pointer;
          }
        }
        .box2 {
          padding-bottom: 15px;
          border-bottom: 1px solid #e3e3e3;
        }
        .box1,
        .box2 {
          margin-top: 10px;
          input {
            margin-right: 10px;
          }
          input[type="radio"] {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            outline: none;
            -webkit-appearance: none;
            background-color: none;
            border: 1px solid #b5bbc4;
            border-radius: 50%;
            margin-right: 8px;
            position: relative;
            cursor: pointer;
          }
          input[type="radio"]:checked::before {
            content: "00";
            color: transparent;
            position: absolute;
            top: 1.5px;
            left: 1.5px;
            border: 1px solid #20ade5;
            border-radius: 50%;
            background-color: #20ade5;
            width: 11px;
            height: 11px;
            box-sizing: border-box;
          }
          input[type="radio"]:checked {
            border: 1px solid #20ade5;
          }
          label {
            margin-right: 10px;
            font-size: 14px;
            letter-spacing: 1px;
          }
        }
      }
      .share {
        margin-top: 35px;
        padding: 0 30px;

        p {
          .span1 {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            margin-right: 20px;
          }
        }
        #box {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          border-bottom: 1px solid #e3e3e3;
          padding-bottom: 15px;
          .item1 {
            display: flex;
            padding-top: 20px;
            box-sizing: border-box;
            margin-right: 30%;
            .p1 {
              margin-right: 10px;
              font-size: 12px;
              color: #666;
            }
            .tu {
              .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
              }
              .avatar-uploader .el-upload:hover {
                border-color: #409eff;
              }
              .avatar-uploader-icon {
                font-size: 32px !important;
                color: #36b5e8;
                width: 80px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                font-weight: 700;
              }
              .avatar {
                width: 80px;
                height: 80px;
                display: block;
              }
              .p2 {
                .span-1 {
                  margin-right: 10px;
                  color: #999;
                  font-size: 14px;
                  margin-bottom: 16px;
                  cursor: pointer;
                  letter-spacing: 1px;
                }
              }
            }
          }
          .item2 {
            display: flex;
            padding-top: 20px;
            box-sizing: border-box;
            .p1 {
              margin-right: 10px;
              font-size: 12px;
              color: #666;
            }
            .tu {
              .p2 {
                margin-top: 10px;
                .span-1 {
                  margin-right: 10px;
                  color: #999;
                  font-size: 12px;
                  margin-bottom: 16px;
                  cursor: pointer;
                  letter-spacing: 1px;
                }
              }
            }
          }
        }
      }
      .title {
        margin-top: 35px;
        padding: 0 30px;
        margin-bottom: 20px;
        padding-bottom: 60px;
        p {
          .span1 {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            margin-right: 20px;
          }
        }
        .style {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 15px;
          .el-input {
            width: 30%;
          }
          .p2 {
            font-size: 12px;
            color: #666;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5%;
            word-break: break-all;
          }
        }
      }
    }

    .btn {
      width: 90%;
      height: 60px;
      background-color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #e3e3e3;
      padding-top: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      position: fixed;
      bottom: 0px;
      button {
        margin-right: 40px;
        background-color: #37b5e8;
        width: 150px;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        padding: 0 18px;
        box-sizing: border-box;
        .iconfont {
          color: #fff;
          padding-right: 5px;
        }
      }
    }
  }
}
</style>
